<template>
    <view>
        <u-cell-group>
            <u-cell icon="photo-fill" size="large" title="头像" value="内容" isLink>
                <template #value>
                    <u-image width='80rpx' height='80rpx' slot="right-icon" :src="state.user.avatar"
                        shape="circle"></u-image>
                </template>
            </u-cell>
            <u-cell icon="account-fill" size="large" title="昵称" @tap="openModal(state.user)" :value="state.user.uaccount"
                isLink></u-cell>
            <u-cell icon="tags-fill" size="large" title="性别" :value="state.user.gender" isLink></u-cell>
            <u-cell icon="phone-fill" size="large" title="手机" :value="state.user.phone"></u-cell>
            <u-cell icon="integral-fill" size="large" title="姓名" :value="state.user.uname" isLink></u-cell>
            <u-cell icon="pushpin-fill" size="large" title="身份证" :value="state.user.uidcard" isLink></u-cell>
            <u-cell icon="email-fill" size="large" title="邮箱" :value="state.user.uemail" isLink></u-cell>
        </u-cell-group>
        <!-- 模态框 -->
        <u-modal :show="state.isShowModal" :title="state.modalTitle" @cancel="state.isShowModal = false"
            @confirm="confirm()" :showCancelButton="true">
            <view>
                <u-from :model="state.formdata">
                    <u-form-item label="昵称" prop="uaccount" labelWidth="60">
                        <u-input v-model="state.formdata.uaccount" />
                    </u-form-item>
                    <u-form-item label="性别" prop="gender" labelWidth="60">
                        <u-radio-group v-model="state.formdata.gender" placement="row">
                            <u-radio label="保密" name="保密"></u-radio>
                            <u-radio label="男" name="男"></u-radio>
                            <u-radio label="女" name="女"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <u-form-item label="姓名" prop="uname" labelWidth="60">
                        <u-input v-model="state.formdata.uname" />
                    </u-form-item>
                    <u-form-item label="身份证" prop="uidcard" labelWidth="60">
                        <u-input v-model="state.formdata.uidcard" />
                    </u-form-item>
                    <u-form-item label="邮箱" prop="uemail" labelWidth="60">
                        <u-input v-model="state.formdata.uemail" />
                    </u-form-item>
                </u-from>
            </view>
        </u-modal>
    </view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getUserById, updateUserById } from '../../../network/mine'
const state = reactive({
    user: [],
    formdata: {
        uaccount: '',
        gender: 0,
        phone: '',
        uname: '',
        uidcard: '',
        uemail: ''
    },
    isShowModal: false,
    modalTitle: '实名认证',
    gender: ['保密', '男', '女']
})

// 获取页面的传值
onLoad((option) => {
    console.log(option.uid); //打印出上个页面传递的参数。
    getUserById({ uid: option.uid }).then((res) => {
        state.user = res.data;
        // 用户未上传头像时 使用默认图片作为头像
        if (state.user.avatar == '' || state.user.avatar == 'null') {
            state.user.avatar = '/static/logo.png'
        }
        // 判断性别
        state.user.gender = state.gender[state.user.gender]
    })
})
// 打开模态框修改数据
const openModal = (user) => {
    state.isShowModal = true;
    state.formdata.uaccount = user.uaccount;
    state.formdata.gender = user.gender;
    state.formdata.phone = user.phone;
    state.formdata.uname = user.uname;
    state.formdata.uidcard = user.uidcard;
    state.formdata.uemail = user.uemail;
}

const confirm = () => {
    // state.isShowModal = false
    console.log(state.user.uid);
    updateUserById({ uid: state.user.uid, data: state.formdata }).then((res) => {
        console.log(res.code);
        if (res.code == 0) {
            uni.showToast({
                icon: 'success',
                title: '更新完成'
            });
            state.user = res.data;
            state.isShowModal = false;
            state.user.gender = state.gender[state.user.gender]
        } else {
            uni.showToast({
                icon: 'none',
                title: res.msg
            });
        }
    })
}
</script>